{% extends 'base.html' %}
{% load static %}

{% block title %}Upload Paper - Research Analyzer{% endblock %}

{% block extra_css %}
<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --success-gradient: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
        --upload-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        --card-shadow: 0 15px 35px rgba(0,0,0,0.1);
        --hover-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

    .upload-hero {
        background: var(--primary-gradient);
        color: white;
        border-radius: 25px;
        padding: 3rem;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
        text-align: center;
    }

    .upload-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 200px;
        height: 200px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        animation: float 6s ease-in-out infinite;
    }

    .upload-hero::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 150px;
        height: 150px;
        background: rgba(255,255,255,0.08);
        border-radius: 50%;
        animation: float 8s ease-in-out infinite reverse;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(10deg); }
    }

    .upload-card {
        background: white;
        border-radius: 20px;
        box-shadow: var(--card-shadow);
        border: none;
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .upload-area {
        border: 3px dashed #e9ecef;
        border-radius: 20px;
        padding: 4rem 2rem;
        text-align: center;
        background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
        margin: 2rem 0;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .upload-area::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
        transition: left 0.5s;
    }

    .upload-area:hover::before {
        left: 100%;
    }

    .upload-area:hover {
        border-color: #667eea;
        background: linear-gradient(135deg, #f0f2ff 0%, #ffffff 100%);
        transform: scale(1.02);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
    }

    .upload-area.dragover {
        border-color: #28a745;
        background: var(--success-gradient);
        color: white;
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(40, 167, 69, 0.3);
    }

    .upload-area.file-selected {
        border-color: #667eea;
        background: linear-gradient(135deg, #e8f4fd 0%, #f0f2ff 100%);
        border-style: solid;
    }

    .upload-icon {
        font-size: 5rem;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1.5rem;
        display: block;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }

    .upload-area.dragover .upload-icon {
        color: white !important;
        -webkit-text-fill-color: white !important;
        animation: bounce 0.6s infinite alternate;
    }

    @keyframes bounce {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }

    .file-info {
        margin-top: 2rem;
        padding: 1.5rem;
        background: white;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        display: none;
        transform: translateY(20px);
        opacity: 0;
        transition: all 0.4s ease;
    }

    .file-info.show {
        display: block;
        transform: translateY(0);
        opacity: 1;
    }

    .file-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-right: 1rem;
    }

    .btn-upload {
        background: var(--primary-gradient);
        border: none;
        border-radius: 15px;
        color: white;
        padding: 1rem 2rem;
        font-weight: 700;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .btn-upload::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .btn-upload:hover::before {
        left: 100%;
    }

    .btn-upload:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
        color: white;
    }

    .btn-upload:disabled {
        background: #e9ecef;
        color: #6c757d;
        transform: none;
        box-shadow: none;
    }

    .info-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .info-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: var(--card-shadow);
        transition: all 0.3s ease;
        border: none;
    }

    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--hover-shadow);
    }

    .info-card-icon {
        width: 70px;
        height: 70px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .format-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .format-item {
        text-align: center;
        padding: 1.5rem;
        background: #f8f9fc;
        border-radius: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .format-item:hover {
        background: #e8f4fd;
        transform: translateY(-3px);
    }

    .format-icon {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
        display: block;
    }

    .progress-bar-modern {
        height: 8px;
        border-radius: 4px;
        background: #e9ecef;
        overflow: hidden;
        margin-top: 1rem;
        display: none;
    }

    .progress-fill {
        height: 100%;
        background: var(--primary-gradient);
        width: 0%;
        transition: width 0.3s ease;
        border-radius: 4px;
    }

    .upload-tips {
        background: var(--upload-gradient);
        border-radius: 15px;
        padding: 2rem;
        margin-top: 2rem;
        border: none;
    }

    .tip-item {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        padding: 1rem;
        background: rgba(255,255,255,0.7);
        border-radius: 10px;
        backdrop-filter: blur(10px);
    }

    .tip-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--primary-gradient);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    @media (max-width: 768px) {
        .upload-hero {
            padding: 2rem 1.5rem;
        }
        
        .upload-area {
            padding: 3rem 1.5rem;
        }
        
        .upload-icon {
            font-size: 4rem;
        }
        
        .info-cards {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Hero Section -->
    <div class="upload-hero">
        <h1 class="display-5 fw-bold mb-3">
            <i class="fas fa-rocket me-3"></i>Upload Your Research Paper
        </h1>
        <p class="lead mb-4">
            Transform your research with AI-powered analysis. Upload once, ask unlimited questions.
        </p>
        <div class="row justify-content-center">
            <div class="col-auto">
                <div class="d-flex align-items-center">
                    <i class="fas fa-check-circle me-2"></i>
                    <span>Instant Processing</span>
                </div>
            </div>
            <div class="col-auto">
                <div class="d-flex align-items-center">
                    <i class="fas fa-check-circle me-2"></i>
                    <span>Smart Q&A</span>
                </div>
            </div>
            <div class="col-auto">
                <div class="d-flex align-items-center">
                    <i class="fas fa-check-circle me-2"></i>
                    <span>Export Results</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Upload Form -->
            <div class="upload-card">
                <div class="card-body p-4">
                    <form method="post" enctype="multipart/form-data" id="upload-form">
                        {% csrf_token %}
                        
                        <div class="upload-area" id="upload-area">
                            <div class="upload-content">
                                <i class="fas fa-cloud-upload-alt upload-icon" id="upload-icon"></i>
                                <h3 class="mb-3" id="upload-title">Drop your paper here</h3>
                                <p class="text-muted mb-4" id="upload-subtitle">
                                    or <strong>click to browse</strong> your files
                                </p>
                                
                                {{ form.file }}
                                
                                <div class="file-info" id="file-info">
                                    <div class="d-flex align-items-center">
                                        <div class="file-icon" id="file-icon">
                                            <i class="fas fa-file"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1" id="file-name">Selected File</h6>
                                            <div class="small text-muted">
                                                <span id="file-size">Size</span>
                                                <span class="mx-2">•</span>
                                                <span id="file-type">Type</span>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-danger" id="remove-file">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {% if form.file.errors %}
                            <div class="alert alert-danger rounded-4">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                {{ form.file.errors }}
                            </div>
                        {% endif %}
                        
                        <div class="progress-bar-modern" id="progress-bar">
                            <div class="progress-fill" id="progress-fill"></div>
                        </div>
                        
                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-upload btn-lg" id="upload-btn" disabled>
                                <i class="fas fa-magic me-2"></i>
                                <span id="btn-text">Upload & Start Analysis</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Information Cards -->
    <div class="info-cards">
        <!-- Supported Formats -->
        <div class="info-card">
            <div class="info-card-icon bg-primary bg-gradient text-white">
                <i class="fas fa-file-alt"></i>
            </div>
            <h5 class="mb-3">Supported Formats</h5>
            <div class="format-grid">
                <div class="format-item">
                    <i class="fas fa-file-pdf format-icon text-danger"></i>
                    <h6>PDF</h6>
                    <small class="text-muted">Research papers</small>
                </div>
                <div class="format-item">
                    <i class="fas fa-file-word format-icon text-primary"></i>
                    <h6>DOCX</h6>
                    <small class="text-muted">Word documents</small>
                </div>
                <div class="format-item">
                    <i class="fas fa-file-alt format-icon text-success"></i>
                    <h6>TXT</h6>
                    <small class="text-muted">Plain text</small>
                </div>
            </div>
            <div class="text-center mt-3">
                <small class="text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    Maximum file size: <strong>50MB</strong>
                </small>
            </div>
        </div>

        <!-- How It Works -->
        <div class="info-card">
            <div class="info-card-icon bg-success bg-gradient text-white">
                <i class="fas fa-cogs"></i>
            </div>
            <h5 class="mb-3">How It Works</h5>
            <div class="step-list">
                <div class="d-flex align-items-center mb-3">
                    <div class="step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-size: 0.8rem; font-weight: bold;">1</div>
                    <div>
                        <strong>Upload</strong>
                        <div class="small text-muted">Select and upload your research paper</div>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3">
                    <div class="step-number bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-size: 0.8rem; font-weight: bold;">2</div>
                    <div>
                        <strong>Process</strong>
                        <div class="small text-muted">AI extracts and analyzes content</div>
                    </div>
                </div>
                <div class="d-flex align-items-center">
                    <div class="step-number bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-size: 0.8rem; font-weight: bold;">3</div>
                    <div>
                        <strong>Explore</strong>
                        <div class="small text-muted">Ask questions and get insights</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Upload Tips -->
    <div class="upload-tips">
        <h5 class="mb-4 text-center">
            <i class="fas fa-lightbulb me-2"></i>Pro Tips for Better Results
        </h5>
        <div class="row">
            <div class="col-md-6">
                <div class="tip-item">
                    <div class="tip-icon">
                        <i class="fas fa-file-pdf"></i>
                    </div>
                    <div>
                        <strong>Use High-Quality PDFs</strong>
                        <div class="small">Clear text and good formatting improve analysis accuracy</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="tip-item">
                    <div class="tip-icon">
                        <i class="fas fa-language"></i>
                    </div>
                    <div>
                        <strong>English Content Works Best</strong>
                        <div class="small">Our AI is optimized for English research papers</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="tip-item">
                    <div class="tip-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div>
                        <strong>Academic Papers Preferred</strong>
                        <div class="small">Research papers, theses, and academic articles work best</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="tip-item">
                    <div class="tip-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div>
                        <strong>Processing Takes Time</strong>
                        <div class="small">Larger papers may take a few minutes to process</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadArea = document.getElementById('upload-area');
    const fileInput = document.getElementById('{{ form.file.id_for_label }}');
    const fileInfo = document.getElementById('file-info');
    const fileName = document.getElementById('file-name');
    const fileSize = document.getElementById('file-size');
    const fileType = document.getElementById('file-type');
    const fileIcon = document.getElementById('file-icon');
    const uploadBtn = document.getElementById('upload-btn');
    const btnText = document.getElementById('btn-text');
    const uploadIcon = document.getElementById('upload-icon');
    const uploadTitle = document.getElementById('upload-title');
    const uploadSubtitle = document.getElementById('upload-subtitle');
    const removeFileBtn = document.getElementById('remove-file');
    const progressBar = document.getElementById('progress-bar');
    const progressFill = document.getElementById('progress-fill');
    
    // Hide file input
    fileInput.style.display = 'none';
    
    // Click to upload
    uploadArea.addEventListener('click', function(e) {
        if (e.target !== removeFileBtn && !removeFileBtn.contains(e.target)) {
            fileInput.click();
        }
    });
    
    // File selection handler
    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            handleFileSelect(this.files[0]);
        }
    });
    
    // Drag and drop handlers
    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
        uploadArea.classList.add('dragover');
        uploadTitle.textContent = 'Drop it like it\'s hot! 🔥';
        uploadSubtitle.textContent = 'Release to upload your paper';
    });
    
    uploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (!uploadArea.contains(e.relatedTarget)) {
            uploadArea.classList.remove('dragover');
            resetUploadText();
        }
    });
    
    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();
        uploadArea.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            // Create a new FileList
            const dt = new DataTransfer();
            dt.items.add(files[0]);
            fileInput.files = dt.files;
            handleFileSelect(files[0]);
        }
    });
    
    // Remove file handler
    removeFileBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        resetFile();
    });
    
    function handleFileSelect(file) {
        if (file) {
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileType.textContent = file.type || 'Unknown';
            
            // Update file icon
            const ext = file.name.split('.').pop().toLowerCase();
            updateFileIcon(ext);
            
            // Show file info with animation
            uploadArea.classList.add('file-selected');
            fileInfo.classList.add('show');
            uploadBtn.disabled = false;
            
            // Update upload area text
            uploadTitle.textContent = 'File Ready to Upload';
            uploadSubtitle.textContent = 'Click upload button to start analysis';
            uploadIcon.className = 'fas fa-check-circle upload-icon text-success';
            
            // Validate file
            if (file.size > 50 * 1024 * 1024) { // 50MB
                showError('File size too large. Maximum allowed size is 50MB.');
                resetFile();
                return;
            }
            
            const allowedTypes = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain'];
            if (!allowedTypes.includes(file.type) && !['pdf', 'docx', 'txt'].includes(ext)) {
                showError('File type not supported. Please upload PDF, DOCX, or TXT files.');
                resetFile();
                return;
            }
        }
    }
    
    function updateFileIcon(ext) {
        const iconElement = fileIcon.querySelector('i');
        
        switch(ext) {
            case 'pdf':
                iconElement.className = 'fas fa-file-pdf';
                fileIcon.style.background = '#dc3545';
                fileIcon.style.color = 'white';
                break;
            case 'docx':
                iconElement.className = 'fas fa-file-word';
                fileIcon.style.background = '#007bff';
                fileIcon.style.color = 'white';
                break;
            case 'txt':
                iconElement.className = 'fas fa-file-alt';
                fileIcon.style.background = '#28a745';
                fileIcon.style.color = 'white';
                break;
            default:
                iconElement.className = 'fas fa-file';
                fileIcon.style.background = '#6c757d';
                fileIcon.style.color = 'white';
        }
    }
    
    function resetFile() {
        fileInput.value = '';
        fileInfo.classList.remove('show');
        uploadArea.classList.remove('file-selected');
        uploadBtn.disabled = true;
        resetUploadText();
    }
    
    function resetUploadText() {
        uploadTitle.textContent = 'Drop your paper here';
        uploadSubtitle.innerHTML = 'or <strong>click to browse</strong> your files';
        uploadIcon.className = 'fas fa-cloud-upload-alt upload-icon';
    }
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    function showError(message) {
        // Create error alert
        const alert = document.createElement('div');
        alert.className = 'alert alert-danger alert-dismissible fade show rounded-4 mt-3';
        alert.innerHTML = `
            <i class="fas fa-exclamation-circle me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        uploadArea.parentNode.appendChild(alert);
        
        // Auto-dismiss after 5 seconds
        setTimeout(() => {
            if (alert.parentNode) {
                alert.remove();
            }
        }, 5000);
    }
    
    // Form submission with progress
    document.getElementById('upload-form').addEventListener('submit', function(e) {
        uploadBtn.disabled = true;
        btnText.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Uploading...';
        progressBar.style.display = 'block';
        
        // Simulate progress (since we can't get real upload progress easily)
        let progress = 0;
        const interval = setInterval(() => {
            progress += Math.random() * 20;
            if (progress >= 90) {
                progress = 90;
                clearInterval(interval);
                btnText.innerHTML = '<i class="fas fa-cogs fa-spin me-2"></i>Processing...';
            }
            progressFill.style.width = progress + '%';
        }, 200);
    });
    
    // Add some entrance animations
    setTimeout(() => {
        document.querySelector('.upload-hero').style.opacity = '1';
        document.querySelector('.upload-hero').style.transform = 'translateY(0)';
    }, 100);
    
    setTimeout(() => {
        document.querySelector('.upload-card').style.opacity = '1';
        document.querySelector('.upload-card').style.transform = 'translateY(0)';
    }, 300);
    
    // Initially hide elements for animation
    document.querySelector('.upload-hero').style.opacity = '0';
    document.querySelector('.upload-hero').style.transform = 'translateY(20px)';
    document.querySelector('.upload-hero').style.transition = 'all 0.6s ease';
    
    document.querySelector('.upload-card').style.opacity = '0';
    document.querySelector('.upload-card').style.transform = 'translateY(20px)';
    document.querySelector('.upload-card').style.transition = 'all 0.6s ease';
});
</script>
{% endblock %}